<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>
    .banner-main{
        display: flex;
        height: 340px;
    }
    .banner-ggBox{
        width: 604px;
        height: 342px;
        background-color: antiquewhite;
        overflow: hidden;
    }
    .banner-ggBox ul{
        display: flex;
       /* transform: translateX(-604px); */
    }
    .banner-ggBox ul li{
        width: 604px;
        height: 298px;
        background-color: burlywood;
    }
    .banner-ggBox .adBtn{
        display: flex;
        height: 44px;
        background-color: rgb(0,0,0);
    }
    .banner-ggBox .adBtn a{
        width: 120.79px;
        height: 44px;
        color: #B1B2BE;
        font-size: 14px;
        text-align: center;
        line-height: 44px;
    }
    .banner-ggBox .adBtn a:hover,
    .banner-ggBox .adBtn .active{
        color: rgb(243,194,88);
        background-color: rgb(38,38,38);
    }
    .news-center{
        width: 359px;
        height: 342px;
        padding: 0 17px;
        box-sizing: border-box;
        background-color: rgb(36,35,41);
    }
    .buttons-module{
        width: 236px;
        height: 342px;
    }
    .btns{
        display: block;
        height: 128px;
        background-image: url(./img/sprite_2.png);
    }
    .download-btn{
        background-position: 0 -219px;
    }
    .guard-btn{
        height: 106px;
        background-position: 0 -350px;
    }
    .experience-btn{
        height: 108px;
        background-position: 0 -461px;
    }
    .new-list{
        overflow: hidden;
    }
    .new-list .new-header{
        display: flex;
    }
    .new-list .item{
        flex: 1;
        width: 52px;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        text-align: center;
        border-bottom: 3px solid black;
        cursor: pointer;
    }
    .new-list .item a{
        display: inline-block;
        height: 48px;
        line-height: 45px;
        color: #b8b9c5;
    }
   /* .new-list .item:nth-child(-n+5):hover,.new-list .active{
        border-bottom-color: rgb(243,194,88);
    }
    .new-list .item:nth-child(-n+5):hover a,
    .new-list .active a{
        color: rgb(243,194,88);
    } */
    .new-list .active{
        border-bottom-color: rgb(243,194,88);
    }
    .new-list .active a{
        color: rgb(243,194,88);
    }
    .new-title{
        height: 36px;
        margin: 18px 0 11px;
        padding: 0 25px 0 15px;
        font-size: 18px;
        line-height: 36px;
        color: #F3C258;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        background-color: rgb(65,64,70);
    }
    .new-body{
        display: flex;
    }
    .new-body .body-item{
        width: 100%;
        height: 100%;
    }
    .new-message li{
        display: flex;
        position: relative;
        align-items: center;
        margin-bottom: 11px;
    }
    .new-message .title{
        display: inline-block;
        margin: 2px 5px 0 0 ;
        font-size: 12px;
        color: #ff3636;
        border: 1px solid #ff3636;
    }
    .new-message .msg{
        width: 230px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #B8B9C5;
    }
    .new-message li em{
        margin-left: 37px;
        font-style: normal;
        font-size: 12PX;
        color: #999;
    }
    .quick-main{
        display: flex;
        justify-content: space-between;
        margin: 28px auto 34px;
    }
    .quick-main .item{
        width: 291px;
        height: 134px;
        overflow: hidden;
        border-radius: 2px;
    }
    .quick-main .item img{
        width: 100%;
        height: 100%;
        transition: all 0.4s ease;
    }
    .quick-main .item:hover img{
        transform:scale(1.1);
        
    }
</style>
<body>
    <div class="banner">
        <div class="wrap_3 banner-main">
            <div class="banner-ggBox">
                <ul class="banner-this">
                    <li>
                        <img src="./img/banner1.jpeg" alt="">
                    </li>
                    <li>
                        <img src="./img/banner2.jpeg" alt="">
                    </li>
                    <li>
                        <img src="./img/banner3.jpeg" alt="">
                    </li>
                    <li>
                        <img src="./img/banner4.jpeg" alt="">
                    </li>
                    <li>
                        <img src="./img/banner5.jpeg" alt="">
                    </li>
                </ul>
                <div class="adBtn">
                    <a data-index="0" href="" class="active">桑启的旅途故事</a>
                    <a data-index="1" href="">启示之音抢先听</a>
                    <a data-index="2" href="">谁成为版本之子</a>
                    <a data-index="3" href="">观赛体验升级</a>
                    <a data-index="4" href="">季后赛开战</a>
                </div>
            </div>
            <div class="news-center">
                <div class="new-list">
                    <ul class="new-header">
                        <li data-index="0" class="item active">
                            <a href="">热门</a>
                        </li>
                        <li data-index="1" class="item">
                            <a href="">新闻</a>
                        </li>
                        <li data-index="2" class="item">
                            <a href="">公告</a>
                        </li>
                        <li data-index="3" class="item">
                            <a href="">活动</a>
                        </li>
                        <li data-index="4" class="item">
                            <a href="">赛事</a>
                        </li>
                        <li class="item more">
                            <a href="">...</a>
                        </li>
                    </ul>
                    <ul class="new-body">
                        <li class="body-item">
                            <div class="new-title">
                                8月25日体验服停机更新公告222222
                            </div>
                            <ul class="new-message">
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑333333333333333 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                            </ul>
                        </li>
                        <li class="body-item">
                            <div class="new-title">
                                8月25日体验服停机更新公告222222
                            </div>
                            <ul class="new-message">
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                            </ul>
                        </li>
                        <li class="body-item">
                            <div class="new-title">
                                8月25日体验服停机更新公告222222
                            </div>
                            <ul class="new-message">
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                            </ul>
                        </li>
                        <li class="body-item">
                            <div class="new-title">
                                8月25日体验服停机更新公告222222
                            </div>
                            <ul class="new-message">
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                            </ul>
                        </li>
                        <li class="body-item">
                            <div class="new-title">
                                8月25日体验服停机更新公告222222
                            </div>
                            <ul class="new-message">
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                                <li>
                                    <span class="title">活动</span>
                                    <span class="msg">《行剑 枫霜尽》活动开启公告</span>
                                    <em>8/24</em>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="buttons-module">
                <a href="" class="download-btn btns"></a>
                <a href="" class="guard-btn btns"></a>
                <a href="" class="experience-btn btns"></a>
            </div>
        </div>
    </div>
    <div class="quick-main wrap_3">
            <div class="item">
                <img src="./img/quick.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/quick.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/quick.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/quick.jpg" alt="">
            </div>
    </div>
    <script>
        // 轮播图
        const banner = document.querySelector('.banner-this');
        let active = document.querySelector('.active');
        const adBtn = document.querySelector('.adBtn');
        let index = 0;
        let bannerTimer = timer();
        function changeBG(){
                index++;
                if(index==banner.children.length)index=0;
                banner.style.transform = `translateX(${index * -604}px)`;
                banner.style.transition = `all 0.3s`;
                active.classList.remove('active');
                adBtn.children[index].classList.add('active');
                active = adBtn.children[index];
        }
        function timer(){
            return setInterval(changeBG,3000)
        }
        adBtn.addEventListener('mouseover',function(e){
            if(e.target.tagName=='A'){
                let a = e.target;
                clearInterval(bannerTimer);
                index = a.dataset.index-1;
                changeBG();
                bannerTimer = timer();
            }
        })
        // 新闻轮播
        const newHeader = document.querySelector('.new-header');
        let newActive = newHeader.querySelector('.active');
        const newBody = document.querySelector('.new-body');
        let index2 = 0;
        newHeader.addEventListener('mouseover',function(e){
            if(e.target.tagName == 'LI' && !e.target.classList.contains('more')){
                let li = e.target;
                console.log(li.dataset.index);
                index2 = li.dataset.index;
                newActive.classList.remove('active');
                li.classList.add('active');
                newActive = li;
                newBody.style.transform = `translate(${index2*-325}px)`;
                newBody.style.transition = 'all 0.4s';
            }
        })
    </script>
</body>
</html>